<template>
	<view class="store-certif">
		<gyd-navbar back-color="#fff" :title="title"></gyd-navbar>

		<view class="certif-list">
			<view class="certif-item" v-for="(item,index) in list" :key="index">
				<view class="content">
					<view class="img">
						<image :src="$imageUrl(item.certificate_file_url)" mode="aspectFill"
							@click="previewImg(item.certificate_files)"></image>
					</view>
					<view class="info">
						<view class="name">资质名称：{{item.name}}</view>
						<!-- <view class="row">资质编号：1234567890</view> -->
						<view class="row" v-if="item.certificate_validity_type==1">有效期：长期有效</view>
						<view class="row" v-else>有效期：{{item.certificate_expiry}}</view>
						<view class="row">审核状态：{{item.status_str}}</view>
					</view>
				</view>
				<view class="err-msg" v-if="item.status==2 || item.status==3">
					<text>{{item.reject_reason}}</text>
				</view>
				<view class="btn-group">
					<u-button class="btn" type="primary" size="mini" plain @click="update(item.id)">更新资质</u-button>
					<u-button class="btn" type="warning" size="mini" plain @click="del(item)">删除资质</u-button>
				</view>
			</view>

			<view class="empty-data" v-if="list.length===0">暂无资质</view>
		</view>

		<view class="footer">
			<view class="btn-group">
				<u-button type="primary" size="large" block
					@click="pageRoute('/merchantPages/store-manage/certif-form')">新增资质</u-button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import util from '@/utils/util';
	import {
		ref,
		reactive,
		toRefs,
		inject,
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const state = reactive({
		title: '商户资质',
		themeColor: cache.get('themeColor'),
		imgHost: util.requestUrl(),
		store_id: 0,
		isMore: true,
		list: []
	});

	//在页面所有元素加载完成后执行（只执行一次）
	onLoad((opt) => {
		console.log('onLoad');
		if (opt.hasOwnProperty('id')) {
			console.log('传递参数', opt.id);
		}
		let selStore = cache.get('selStore');
		if (selStore) {
			state.store_id = selStore.id;
		}
		getDataList();
	});

	//在页面由不可见变为可见时执行（只要页面显示都会执行）
	onShow(() => {
		console.log('onShow');
	})

	//在页面解析完成之后执行
	onReady(() => {
		console.log('onReady');
	})

	onPullDownRefresh(() => {
		console.log('下拉刷新');
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
		state.isMore = true;
		state.list = [];
		getDataList();
	})

	onReachBottom(() => {
		console.log('触底加载更多');
		getDataList();
	})

	function getDataList() {
		if (!state.isMore) {
			uni.showToast({
				title: '没有更多了！',
				icon: 'none'
			})
			return;
		}
		let params = {
			store_id: state.store_id,
			skip: state.list.length,
		};
		request.get('store.credential/list', params).then(res => {
			console.log('资质列表', res);
			state.isMore = res.data.is_more;
			if (state.list.length == 0) {
				state.list = res.data.data;
			} else {
				state.list = state.list.concat(res.data.data);
			}
		})
	}

	function update(id) {
		uni.showModal({
			title: '提示',
			content: '更新资质文件后需要平台重新审核，请谨慎操作！',
			success: function(res) {
				if (res.confirm) {
					console.log('用户点击确定');
					pageRoute(`/merchantPages/store-manage/certif-form?id=${id}`);
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		})
	}

	function del(item) {
		uni.showModal({
			title: '提示',
			content: '确认要删除《' + item.name + '》吗？',
			success: function(res) {
				if (res.confirm) {
					console.log('用户点击确定');
					request.post('store.credential/del', {
						id: item.id
					}).then(res => {
						console.log('删除资质', res);
						util.showTip(res.msg);
						if (res.code == 1) {
							setTimeout(() => {
								state.list = [];
								state.isMore = true;
								getDataList();
							}, 1000);
						}
					})
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		})
	}

	// 图片预览
	function previewImg(urls) {
		urls.forEach((item, index) => {
			urls[index] = state.imgHost + item;
		})
		uni.previewImage({
			urls: urls
		})
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	}

	function pageTabRoute(url) {
		uni.reLaunch({
			url
		});
	}

	const {
		title,
		themeColor,
		imgHost,
		store_id,
		isMore,
		list
	} = toRefs(state);
</script>

<style lang="scss">
	.store-certif {
		.certif-list {
			.certif-item {
				background: #fff;
				margin-bottom: 20rpx;

				.content {
					display: flex;
					align-items: center;
					padding: 20rpx 20rpx;
					border-bottom: 1px solid #f5f5fb;

					.img {
						width: 120rpx;
						height: 120rpx;
						border-radius: 10rpx;
						overflow: hidden;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.info {
						flex: 1;
						margin-left: 20rpx;
						font-size: 28rpx;

						.name {
							font-size: 30rpx;
							color: #333;
							font-weight: bold;
						}
					}
				}

				.err-msg {
					display: block;
					width: 100%;
					align-items: center;
					color: red;
				}

				.btn-group {
					display: flex;
					justify-content: flex-end;
					padding: 20rpx 20rpx;

					.btn {
						margin-left: 20rpx;
						align-items: center;
					}
				}
			}

			.empty-data {
				margin-bottom: $m24;
				padding: $m24;
				background-color: #fff;
				border-radius: $radius-16;
				text-align: center;
				align-items: center;
				justify-content: center;
			}
		}

		.footer {
			position: fixed;
			/* 固定在底部 */
			bottom: 0;
			width: 100%;

			.btn-group {}
		}
	}
</style>